<template>
  <div class="container">
    <div class="app-container">
      <el-card>
        <div style="height: 40px">
          <el-button
            icon="el-icon-edit"
            type="success"
            style="margin-left: 10px"
            class="filter-item fr"
            size="mini"
            @click="$router.push('/questions/new')"
          >新增试题</el-button>
        </div>

        <span style="font-weight: 900; margin-left: 32px">学科</span>
        <el-select
          v-model="q.subjectID"
          placeholder="请选择"
          class="maright"
          @click.native="getSubjectList"
          @change="getCatalogue"
        >
          <el-option
            v-for="item in SubjectList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
        <span style="font-weight: 900">二级目录</span>
        <el-select
          v-model="q.catalogID"
          placeholder="请选择"
          class="maright"
        >
          <el-option
            v-for="item in catalogueList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
        <span style="font-weight: 900">标签</span>
        <el-select
          v-model="q.tags"
          placeholder="请选择"
          class="maright"
        >
          <el-option
            v-for="item in tagsList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </el-select>
        <span style="font-weight: 900">关键字</span>
        <el-input v-model="q.keyword" style="width: 180px" />

        <div style="margin-top: 20px">
          <span style="font-weight: 900">试题类型</span>
          <el-select
            v-model="q.questionType"
            placeholder="请选择"
            class="maright"
          >
            <el-option
              v-for="item in questionTypeList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />

          </el-select>
          <span style="font-weight: 900; margin-left: 31px">难度</span>
          <el-select
            v-model="q.difficulty"
            placeholder="请选择"
            class="maright"
          >
            <el-option
              v-for="item in difficultyList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />

          </el-select>
          <span style="font-weight: 900">方向</span>
          <el-select
            v-model="q.direction"
            placeholder="请选择"
            class="maright"
          >
            <el-option
              v-for="(item,index) in directionList"
              :key="index"
              :value="item"
              :label="item"
            />

          </el-select>
          <span style="font-weight: 900">录入人</span>
          <el-select
            v-model="q.creatorID"
            placeholder="请选择"
            style="width: 180px"
            @click.native="getUserList"
          >
            <el-option
              v-for="item in usernameList"
              :key="item.id"
              :value="item.id"
              :label="item.username"
            />
          </el-select>
        </div>

        <div style="margin-top: 20px; margin-bottom: 20px">
          <span style="font-weight: 900">题目备注</span>
          <el-input v-model="q.remarks" style="width: 220px" />

          <span style="font-weight: 900; margin-left: 10px">企业简称</span>
          <el-input v-model="q.shortName" style="width: 220px" />

          <span style="font-weight: 900; margin-left: 12px">城市</span>
          <el-select
            v-model="q.province"
            placeholder="请选择"
            class="maright"
            style="width: 100px"
            @change="getCitysList"
          >
            <el-option
              v-for="(item,index) in provincesList"
              :key="index"
              :value="item"
              :label="item"
            />
          </el-select>
          <el-select
            v-model="q.city"
            placeholder="请选择"
            class="maright"
            style="width: 100px"
          >
            <el-option
              v-for="item in citys"
              :key="item"
              :value="item"
              :label="item"
            />
          </el-select>
          <div class="fr" style="margin-right: 10px">
            <el-button @click="clear">清除</el-button>
            <el-button type="primary" @click="clickSubmit">搜索</el-button>
          </div>
        </div>
        <el-alert
          :title="alert"
          type="info"
          show-icon
          :closable="false"
          style="margin-bottom: 20px"
        />
        <!-- 表格 -->
        <el-table
          :data="items"
          :header-cell-style="{
            'background-color': 'rgba(0,0,0,0.1)',
            'border-bottom': '1px solid rgba(0,0,0,0.2)',
          }"
        >
          <el-table-column prop="number" label="试题编号" />
          <el-table-column prop="subject" label="学科" />
          <el-table-column prop="catalog" label="目录" />
          <el-table-column label="题型">
            <template #default="{ row }">
              {{
                questionTypeList.find(
                  (item) => item.value === +row.questionType
                ).label
              }}
            </template>
          </el-table-column>
          <el-table-column label="题干" width="180">
            <template #default="{ row }">
              <div v-html="row.question" />
            </template>
          </el-table-column>
          <el-table-column prop="addDate" label="录入时间">
            <template #default="{ row }">
              {{ row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column label="难度">
            <template #default="{ row }">
              {{
                difficultyList.filter(
                  (item) => item.value === +row.difficulty
                )[0].label
              }}
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="录入人" />
          <el-table-column label="操作" width="180">
            <template #default="{row}">
              <el-button
                icon="el-icon-view"
                type="primary"
                size="small"
                circle
                title="查看"
                @click="handleQuestionPreview(row)"
              />
              <el-button
                icon="el-icon-edit"
                type="success"
                size="small"
                circle
                title="编辑"
                @click="$router.push(`/questions/new?id=${row.id}`)"
              />
              <el-button
                icon="el-icon-delete"
                type="danger"
                size="small"
                circle
                title="删除"
                @click="delQuestion(row)"
              />
              <el-button
                icon="el-icon-star-off"
                type="warning"
                size="small"
                circle
                title="加入精选"
                @click="addChoice(row)"
              />
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="fr" style="margin-top: 10px">
          <el-pagination
            :current-page="q.page"
            :page-sizes="[1, 2, 3, 4, 5, 6, 7]"
            :page-size="q.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="counts"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <!-- 题目弹出框 -->
        <QuestionsPreview :is-show-dialog.sync="isShowDialog" :row-question="rowQuestion" />
      </el-card>
    </div>
  </div>
</template>

<script>
// | page         | 否   | 1    | 当前页数       |
// | ------------ | ---- | ---- | -------------- |
// | pagesize     | 否   | 10   | 页尺寸         |
// | subjectID    | 否   |      | 学科           |
// | difficulty   | 否   |      | 难度           |
// | questionType | 否   |      | 试题类型       |
// | tags         | 否   |      | 标签名称       |
// | province     | 否   |      | 企业所在地省份 |
// | city         | 否   |      | 企业所在城市   |
// | keyword      | 否   |      | 关键字         |
// | remarks      | 否   |      | 题目备注       |
// | shortName    | 否   |      | 企业简称       |
// | direction    | 否   |      | 方向           |
// | creatorID    | 否   |      | 录入人         |
// | catalogID    | 否   |      | 目录           |
import { list, remove, choiceAdd } from '@/api/hmmm/questions.js'
import { difficulty, questionType, direction } from '@/api/hmmm/constants.js'
import { simple } from '@/api/hmmm/subjects.js'
import { simple as catalogue } from '@/api/hmmm/directorys.js'
import { simple as getTags } from '@/api/hmmm/tags.js'
import { simple as getuser } from '@/api/base/users.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import QuestionsPreview from '../components/questions-preview.vue'
export default {
  name: 'Questions',
  components: { QuestionsPreview },
  data() {
    return {
      q: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 5
      },
      counts: null, // 总条数
      pages: null, // 总页数
      items: [], // 表格数据
      difficultyList: difficulty, // 难度对照表
      questionTypeList: questionType, // 题型对照表
      directionList: direction, // 方向对照表
      SubjectList: [], // 学科列表
      catalogueList: [], // 目录列表
      tagsList: [], // 标签列表
      usernameList: [], // 录入人列表
      provincesList: provinces(), // 城市列表
      citys: [], // 城市下地区列表
      isShowDialog: false, // 题目弹出框
      rowQuestion: {} // 题目预览内容
    }
  },
  computed: {
    alert() {
      return '数据一共' + this.counts + '条'
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 获取所有表格数据
    async getList() {
      const { data: { items, counts, pages }} = await list(this.q)
      // console.log(items)
      this.counts = counts
      this.pages = pages
      this.items = items
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.q.page = 1
      this.q.pagesize = val
      this.getList()
    },
    // 当前页该变
    handleCurrentChange(val) {
      this.q.page = val
      this.getList()
    },
    // 获取学科列表
    async getSubjectList() {
      const { data } = await simple()
      // console.log(data)
      this.SubjectList = data
    },
    async getCatalogue(value) {
      // console.log(value)
      if (value) {
        // 获取目录列表
        const { data } = await catalogue({ subjectID: value })
        // console.log(data)
        this.catalogueList = data
        // 获取标签列表
        const { data: a } = await getTags({ subjectID: value })
        this.tagsList = a
      } else {
        this.catalogueList = []
        this.tagsList = []
      }
    },
    // 获取用户
    async getUserList() {
      // console.log(11)
      const { data } = await getuser()
      // console.log(res)
      this.usernameList = data
    },
    // 城市值发生变化
    getCitysList(val) {
      // console.log(val)
      this.citys = citys(val)
    },
    // 搜索功能
    clickSubmit() {
      this.page = 1
      this.getList()
    },
    // 清除搜索内容
    clear() {
      this.q = {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        creatorID: null,
        catalogID: null,
        page: 1,
        pagesize: 5
      }
    },
    // 题目预览
    handleQuestionPreview(row) {
      console.log(row, 222)
      this.isShowDialog = true
      this.rowQuestion = row
    },
    // 删除题目
    delQuestion(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await remove(row)
        // console.log(res)
        this.$message.success('删除成功')
        if (this.getList.length === 1 && this.q.page > 1) {
          this.q.page--
        }
        this.getList()
      }).catch(() => {
        this.$message.info('已取消操作')
      })
    },
    // 加入精选
    addChoice(row) {
      this.$confirm('是否加入精选题库', '提示').then(async() => {
        await choiceAdd({
          id: row.id,
          choiceState: 1
        })
        this.$message.success('加入成功')
        // this.$refs.btnRef.icon = ' el-icon-check'
        this.$router.push('/questions/choice')
      }).catch(() => {
        this.$message.info('已取消操作')
      })
    }

  }
}
</script>

<style scoped lang="scss">
.container {
  .maright {
    margin-right: 15px;
  }

  ::v-deep .el-table__header-wrapper {
    background-color: #000;
    box-shadow: 5px 5px 5px;
  }
}
</style>
